<template>
  <div class="app-container">
    <el-select v-model="filters.levelId" placeholder="请选择用户层级" @change="changeHandler">
      <el-option
        v-for="item in levelList"
        :label="item.name"
        :key="item.levelId"
        :value="item.levelId"
      ></el-option>
    </el-select>
    <el-select v-model="filters.platform" @change="changeHandler">
      <el-option v-for="item in consts.DEVICE_TYPE"
                 :label="item.title"
                 :key="item.value"
                 :value="item.value"></el-option>
    </el-select>
    <el-table border :data="tableData" v-loading="loading" element-loading-text="加载中..."
              class="el-table-align-center">
      <el-table-column label="支付类型" prop="paymentName" align="center"></el-table-column>
      <el-table-column label="三方账户总数（使用中/总数）" prop="merchantCount" align="center">
        <template slot-scope="{row}">
          <el-button v-if="roleCheck(payIncomeSetType.thirdAccount)" type="text" @click="checkMerchant(row.paymentId)">
            {{row.validMerchantCount}} / {{row.merchantCount}}
          </el-button>
          <span v-else-if="roleCheck({exclude: payIncomeSetType.thirdAccount})">
                 {{row.validMerchantCount}} / {{row.merchantCount}}
              </span>
        </template>
      </el-table-column>
      <!--<el-table-column label="今日已收款总额" prop="successTotal" align="center"></el-table-column>-->
    </el-table>
  </div>
</template>
<script>
  // constants
  import { payIncomeSetType } from '@/router/payRoutes'

  import {getUserLevelList} from "@/services/api/userLevel";
  import {paymentRechargeOverview} from "@/services/api/payment";
  import {grid} from '@/build'

  export default {
    name: "level",
    components: {},
    mixins: [grid],
    data() {
      return {
        payIncomeSetType,
        levelList: [],
        tableData: [],
        currentPaymentId: 0,
        dialogVisible: false,
        paymentList: [],
        filters: {
          levelId: 1,
          platform: 0
        }
      }
    },
    watch: {
      levelList() {
        this.filters.levelId = (this.levelList && this.levelList.length && this.levelList[0].levelId)
        this.gridSearch()
      }
    },
    methods: {
      changeHandler() {
        this.gridSearch()
      },
      checkMerchant(paymentId) {
        this.$router.push({
          path: '/pay/pay-income-set-list',
          replace: true,
          query: {
            tab: 'two',
            subActiveTab: (paymentId==7||paymentId==8||paymentId==9)?'two':'one'
          }
        });
      },
    },
    mounted() {
      this.bindGet(getUserLevelList, 'levelList', {
        action: 'getLevel',
        sendingData: 'filters',
      });
      this.bindGet(paymentRechargeOverview, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
      });
      this.getAll();
      // this.initSort(changeTableSortSetting, true, 'tableData', 'id')
    }
  }
</script>

<style lang="scss" scoped>
  .el-table-align-center {
    &.el-table {
      width: 100%;
      text-align: center !important;

      th {
        text-align: center !important;
      }
    }
  }

  .under-blue {
    text-decoration: underline;
    cursor: pointer;
  }

</style>
